<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<meta name="description" content="智能社是一家专注于web前端开发技术的公司，目前主要提供JavaScript培训和HTML5培训两项服务，同时还推出了大量javascript基础知识教程，智能课堂为你带来全新的学习方法和快乐的学习体验。" />
<title>智能社— http://www.zhinengshe.com</title>
<link rel="stylesheet" href="./Css/index.css" />
    <script src="../js/jquery.js"></script>
    <script src="../js/angular.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(()=>{

            $('#send').click(()=>{
                $('#send-form').show()
            });
            $('#close').click(()=>{
                $('#send-form').hide()
            });

            let oDiv = $('#main');
                oDiv.on('mousedown','.paper',function(ev){
                    let oEvent = ev ||event;
                    console.log(oDiv.width());
                    let disX = oEvent.clientX-$(this).offset().left;
                    let disY = oEvent.clientY-$(this).offset().top + 130;
                    function move(ev) {
                        let oEvent = ev || event;
                        let l = oEvent.clientX - disX;
                        let t = oEvent.clientY - disY;
                        $(this).css({
                            left: l + 'px',
                            top: t + 'px'
                        });
                    }
                function up(){
                    $(this).off('mousemove mouseup');
                }
                $(this).on('mousemove',move);
                $(this).on('mouseup',up);
            });
        });

        angular.module('app',[])
            .controller('msgCtrl',($scope,$http)=>{
                $scope.msgList = [];

                render();
                function render(){
                    $http.get(`wish.php?act=get`).then(res=>{
                            console.log(res.data.msg);
                            $scope.msgList = res.data.msg;
                        let left = document.documentElement.clientWidth;
                        let top = document.documentElement.clientHeight;
                            for(let item in $scope.msgList){
                                let le=rnd(0,left-235);
                                let to=rnd(0,top-170);
                                $scope.msgList[item].r = le;
                                $scope.msgList[item].p = to;
                            }
                        },err=>{});
                }

                $scope.addNew = ()=>{
                    $http.get(`wish.php?act=add&username=${$scope.username}&content=${$scope.content}`).then(res=>{
                        if(res.data.error){
                            alert('发布失败')
                        }else{
                            alert('发布成功');
                            $('#send-form').hide();
                            render();
                            $scope.username = '';
                            $scope.content = ''
                        }
                    },err=>{
                        alert(err)
                    })
                };

                $scope.delMsg = (id)=>{
                    if(confirm('真的要删除吗？')){
                        $http.get(`wish.php?act=delete&id=${id}`).then(res=>{
                            render()
                        },err=>{})
                    }
                }

            })
    </script>
</head>
<body ng-controller="msgCtrl">
<div id='top'>
    <span id='send'></span>
</div>
<div id='main'>
    <dl class='paper a1' ng-repeat="item in msgList" style="position:absolute;left:{{item.r}}px;top: {{item.p}}px;">
        <dt>
            <span class='username'>{{item.username}}</span>
            <span class='num'>No.000{{item.id}}</span>
        </dt>
        <dd class='content'>{{item.content}}</dd>
        <dd class='bottom'>
            <span class='time'>{{item.time*1000|date:'yyyy-MM-dd HH:mm:ss' }}</span>
            <a href="" class='close' ng-click="delMsg(item.id)"></a>
        </dd>
    </dl>
</div>

<div id="layer"></div>

<div id='send-form' style="z-index:2147483647; margin-left: 40%">
    <p class='title'><span>许下你的愿望</span><a href="javascript:;" id='close'></a></p>
    <form action="" name='wish'>
        <p>
            <label for="username" >昵称：</label>
            <input type="text" name='username' id='username' ng-model="username"/>{{username}}
        </p>
        <p>
            <label for="content">愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)</label>
            <textarea name="content" id='content' ng-model="content">{{content}}</textarea>
            <div id='phiz'>
                <img src="./Images/phiz/zhuakuang.gif" alt="抓狂" />
                <img src="./Images/phiz/baobao.gif" alt="抱抱" />
                <img src="./Images/phiz/haixiu.gif" alt="害羞" />
                <img src="./Images/phiz/ku.gif" alt="酷" />
                <img src="./Images/phiz/xixi.gif" alt="嘻嘻" />
                <img src="./Images/phiz/taikaixin.gif" alt="太开心" />
                <img src="./Images/phiz/touxiao.gif" alt="偷笑" />
                <img src="./Images/phiz/qian.gif" alt="钱" />
                <img src="./Images/phiz/huaxin.gif" alt="花心" />
                <img src="./Images/phiz/jiyan.gif" alt="挤眼" />
            </div>
        </p>
        <span id='send-btn' ng-click="addNew()"></span>
    </form>
</div>
<!--[if IE 6]>
<script type="text/javascript" src="./Js/iepng.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('#send,#close,.close','background');
</script>
<![endif]-->
</body>
</html>